<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>配货单列表--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>

<body class="childrenBody">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-input-inline">
                <input id="sheetCode" placeholder="输入配货单号" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="dateRange" placeholder="选择时间范围">
            </div>
            <div class="layui-input-inline">
                <select id="state">
                    <option value="">选择完成状态</option>
                    <option value="未完成">未完成</option>
                    <option value="已完成">已完成</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select class="warehouse_id" name="warehouse_id"> </select>
            </div>
            <div class="layui-inline">
                <a class="layui-btn search_btn"><i class="layui-icon">&#xe615;</i>查询</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addDeliverySheet_btn"> <i class="layui-icon">&#xe654;</i>创建配货单</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger batchDelete_btn"><i class="layui-icon">&#xe640;</i>批量删除</a>
            </div>
        </form>
    </blockquote>

    <table id="deliverySheetList" lay-filter="deliverySheetList" width="100%"></table>

    <script type="text/html" id="deliverySheetListBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="download"><i class="layui-icon">&#xe601;</i>下载</a>
        </script>


    <script type="text/javascript" src="../../layui/layui.all.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script>
        layui.use(['form', 'layer', 'laydate', 'table', 'laytpl'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                table = layui.table;

            var employeeList = eval('(' + window.localStorage.getItem("employeeList") + ')');
            var warehouseList = eval('(' + window.localStorage.getItem("warehouseList") + ')');
            $(".warehouse_id").append(renderSelectOptions(warehouseList, { valueField: "id", textField: "name", selectedValue: null }, "仓库"));
            form.render('select');

            //执行一个laydate实例
            laydate.render({
                elem: '#dateRange' //指定元素
                , range: true
            });

            //第一个实例
            var tableIns = table.render({
                elem: '#deliverySheetList'
                , url: contextPath + '/sys/deliverySheet/queryList' //数据接口
                , id: 'deliverySheetTable'
                , page: true //开启分页
                , even: true
                , limit: 15
                , limits: [15, 30]
                , height: "full-125"
                , method: 'POST'   //laui 修改请求方式   
                , cellMinWidth: 95
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left', align: "center" }
                    , { field: 'id', title: 'ID', align: "center" } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {
                        field: 'code', title: '配货单编码', width: 200, align: "center", sort: true, event: 'jump', templet: function (d) {
                            return '<a class="layui-table-link jump" href="javascript:;" data-url="page/wms/inboundList.html?sheetCode=' + d.code + '"><cite class="layui-hide">入库管理</cite>' + d.code + '</a>';
                        }
                    }
                    , {
                        field: 'warehouseId', title: '仓库', align: "center", templet: function (d) {
                            return renderItemName(warehouseList, d.warehouseId);
                        }
                    }
                    , {
                        title: '耗材数量', width: 150, templet: function (d) {
                            var strs = d.materialIds.split(",");
                            var total = 0;
                            for (var i = 0; i < strs.length; i++) {
                                total += parseInt(strs[i].split("-")[1]);
                            }
                            return '共计 ' + strs.length + ' 类 ' + total + ' 件';
                        }
                    }
                    , {
                        field: 'employeeId', title: '配货员', align: "center", templet: function (d) {
                            return renderItemName(employeeList, d.employeeId);
                        }
                    }
                    , {
                        field: 'state', title: '完成状态', align: "center", templet: function (d) {
                            if (d.state == "已完成") {
                                return "<i class='layui-icon' style='color:green;margin-right:5px'>&#xe617;</i>" + d.state;
                            } else if (d.state == "未完成") {
                                return "<i class='layui-icon' style='color:red;margin-right:5px'>&#xe617;</i>" + d.state;
                            }
                        }
                    }
                    , { field: 'createTime', title: '创建时间', sort: true, width: 200, align: "center" }
                    , { field: 'updateTime', title: '完成时间', sort: true, width: 200, align: "center" }
                    , {
                        field: 'enable', title: '是否启用', align: 'center', templet: function (d) {
                            var disabled = d.state == "已完成" ? "disabled" : ""; //已完成状态下不允许切换启停状态
                            var isChecked = d.enable == "是" ? "checked" : ""; //启停状态赋初值
                            return '<input type="checkbox" name="enable" lay-filter="enable" lay-skin="switch" lay-text="启用|停用" ' + isChecked + ' ' + disabled + '>'
                        }
                    }
                    , { title: '操作', templet: '#deliverySheetListBar', width: 230, fixed: "right", align: "center" }
                ]]
                , done: function (res, curr, count) {
                    //页面之间跳转
                    $(".jump").click(function () {
                        parent.addTab($(this));
                    })
                }
            });

            //切换启停状态
            form.on('switch(enable)', function (data) {
                // 获取当前控件                                                                  
                var selectIfKey = data.othis;
                // 获取当前所在行                                                                 
                var parentTr = selectIfKey.parents("tr");
                //eq(2): 代表的是表头字段位置    .layui-table-cell: 这个元素是我找表格div找出来的..[失望] 
                var id = $(parentTr).find("td:eq(1)").find(".layui-table-cell").text();
                var enable = data.elem.checked ? "是" : "否";

                $.ajax({
                    url: contextPath + '/sys/deliverySheet/enable',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: id,
                        enable: enable
                    },
                    beforeSend: function () {
                        i = showLoad();
                    },
                    success: function (data) {
                        closeLoad(i);

                        if (data.code == 0) {
                            layer.msg("配货单状态切换成功！");
                        } else {
                            layer.alert(data.msg);
                        }

                        //刷新表格
                        $('.search_btn').click();
                    },
                    error: function (data) {
                        closeLoad(i);
                    }
                });

            })

            //搜索
            $(".search_btn").on("click", function () {
                table.reload('deliverySheetTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        sheetCode: $('#name').val(),
                        state: $('#dept').val(),
                        dateRange: $('#duty').val(),
                    }
                });

                return false;
            });

            //添加配货单
            function addDeliverySheet(edit) {
                var index = layui.layer.open({
                    title: "添加配货单",
                    type: 2,
                    content: "deliverySheetAdd.html",
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        iframeWin.initData(edit);

                        setTimeout(function () {
                            layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 500)
                    }
                })
                layui.layer.full(index);
                // window.sessionStorage.setItem("index", index);
                // //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
                // $(window).on("resize", function () {
                //     layui.layer.full(window.sessionStorage.getItem("index"));
                // })
            }

            //新增
            $(".addDeliverySheet_btn").on("click", function () {
                addDeliverySheet();
            });

            //批量删除
            $(".batchDelete_btn").on("click", function () {
                table.reload('deliverySheetTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        sheetCode: $('#name').val(),
                        state: $('#dept').val(),
                        dateRange: $('#duty').val(),
                    }
                });

                return false;
            });

            //监听工具条
            table.on('tool(deliverySheetList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                switch (obj.event) {
                    case 'download':
                        location.href = contextPath + "/sys/deliverySheet/toExcel?delivery_sheet_id=" + data.id;
                        break;
                    case 'edit':
                        addDeliverySheet(data);
                        break;
                    case 'delete':
                        layer.confirm('确定删除此单据？', { icon: 3, title: '提示信息' }, function (index) {
                            // $.get("删除文章接口",{
                            //     newsId : data.newsId  //将需要删除的newsId作为参数传入
                            // },function(data){
                            tableIns.reload();
                            layer.close(index);
                            // })
                        });
                        break;
                }
            });


        });

    </script>
</body>

</html>